<template>
  <div class="joe_main joe_post" style="padding: 0">
    <div class="joe_container joe_bread">
      <ul class="joe_bread__bread">
        <li class="item">
          <svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
            <path
              d="M307.867 805.441h408.266V575.792c0-15.31 29.344-22.046 44.654-22.046 15.336 0 27.762 12.426 27.762 27.762v277.544c0 15.335-12.426 27.762-27.762 27.762h-499.59c-15.31 0-27.762-12.427-27.762-27.762V581.507c0-15.31 12.426-27.762 27.762-27.762 15.31 0 46.67 6.71 46.67 22.046v229.65zM205.8 524.758c-10.845 10.845-56.851 3.93-67.696-6.89a27.762 27.762 0 0 1-.025-39.295l353.253-353.227a27.762 27.762 0 0 1 39.296 0L883.93 478.573a27.813 27.813 0 0 1-12.478 46.491c-9.568 2.552-46.236 6.686-53.253-.331L512 218.559 205.8 524.758z"
            ></path>
          </svg>
          <router-link
            to="/articleHome" class="link" title="首页"
          >
            首页
          </router-link>

        </li>
        <li class="line">/</li>
        <li class="item">
          <a class="link" :href="baseApi+'articleSortList/' + articleData.articleSort"
             :title="articleData.articleSort_dictText"> {{ articleData.articleSort_dictText }}</a>
        </li>
        <li class="line">/</li>
        <li class="item">{{ articleData.title }}</li>
      </ul>
    </div>

    <!--  加载动画  -->
    <div class="joe_archive" v-if="loading">
      <ul class="joe_list__loading">
        <li class="item">
          <div class="thumbnail"></div>
          <div class="information">
            <div class="title"></div>
            <div class="abstract">
              <p></p>
              <p></p>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <!--  正文  -->
    <div class="joe_detail" data-cid="1508" v-else>

      <div class="joe_detail__category">
        <router-link :to="'/articleSortList/'+articleData.articleSort" class="item item-0" title="Linux学习">
          {{ articleData.articleSort_dictText }}
        </router-link>
      </div>

      <h1 class="joe_detail__title">{{ articleData.title }}</h1>
      <div class="joe_detail__count">
        <div class="joe_detail__count-information">
          <img width="35" height="35" class="avatar ls-is-cached lazyloaded"
               :src="getImgView(articleData.userAvatar)"
               :alt="articleData.createBy_dictText"
          >
          <div class="meta">
            <div class="author">
              <router-link class="link" :to="'/personalHome/'+articleData.createBy"
                           :title="articleData.createBy_dictText"
              >
                {{ articleData.createBy_dictText }}
              </router-link>
            </div>
            <div class="item">
              <span class="text">{{ articleData.publishTime }}</span>
              <span class="line">/</span>
              <span class="text">{{ articleData.viewsNum }} 阅读</span>
              <span class="line">/</span>
              <span class="text" style="color: rgb(103, 194, 58);">{{ articleData.publishForm_dictText }}</span>
              <span class="line">/</span>
              <span class="text" style="color: rgb(103, 194, 58);">{{ articleData.articleType_dictText }}</span>
              <span class="line">/</span>
              <span class="text hoverClass" style="color: red" v-if="isFollow" @click="clickFollow(true)">关注</span>
              <span class="text hoverClass" style="color: rgb(103, 194, 58);" v-else
                    @click="clickFollow(false)"
              >已关注</span>
            </div>
          </div>
        </div>
        <time class="joe_detail__count-created" datetime="04/21">{{ formatTime(articleData.publishTime) }}</time>
      </div>
      <article class="joe_detail__article">
        <div
          id="content"
          v-highlight
          v-html="articleData.html"
          style="width: 100%"
          :class="isFollow && articleData.publishForm === '3' ? 'content-html' : ''"
        />

        <div class="hide-article-box hide-article-pos text-center" v-if="isFollow && articleData.publishForm === '3'">
          <a class="btn-readmore fans_read_more btn-readmore-gz" @click="clickFollow(true)">
            <span class="follow-text">关注博主即可阅读全文</span>
            <svg-icon icon-class="arrowDownAttend"/>
          </a>
        </div>
        <div class="contain" style="margin-bottom: 10px; ">
          <blockquote id="onlineTime">阅读时长，您已阅读：{{ onlineTime }}</blockquote>
        </div>
      </article>
      <div class="joe_detail__agree">
        <div class="agree">
          <div class="icon">
            <!-- 点赞 -->
            <svg
              @click="likeCollection(true, articleData.id)"
              :class="isLikes ? 'icon-1 active' : 'icon-1'"
              viewBox="0 0 1024 1024"
              xmlns="http://www.w3.org/2000/svg"
              width="28"
              height="28"
            >
              <path
                d="M621.674667 408.021333c16.618667-74.24 28.224-127.936 34.837333-161.194666C673.152 163.093333 629.941333 85.333333 544.298667 85.333333c-77.226667 0-116.010667 38.378667-138.88 115.093334l-0.586667 2.24c-13.728 62.058667-34.72 110.165333-62.506667 144.586666a158.261333 158.261333 0 0 1-119.733333 58.965334l-21.909333 0.469333C148.437333 407.808 106.666667 450.816 106.666667 503.498667V821.333333c0 64.8 52.106667 117.333333 116.394666 117.333334h412.522667c84.736 0 160.373333-53.568 189.12-133.92l85.696-239.584c21.802667-60.96-9.536-128.202667-70.005333-150.186667a115.552 115.552 0 0 0-39.488-6.954667H621.674667zM544.256 149.333333c39.253333 0 59.498667 36.48 49.888 84.928-7.573333 38.144-21.984 104.426667-43.221333 198.666667-4.512 20.021333 10.56 39.093333 30.912 39.093333h218.666666c6.101333 0 12.16 1.066667 17.909334 3.168 27.445333 9.984 41.674667 40.554667 31.776 68.266667l-85.568 239.573333C744.981333 838.026667 693.301333 874.666667 635.402667 874.666667H223.498667C194.314667 874.666667 170.666667 850.784 170.666667 821.333333V503.498667c0-17.866667 14.144-32.448 31.829333-32.821334l21.866667-0.469333a221.12 221.12 0 0 0 167.381333-82.56c34.346667-42.602667 59.146667-99.306667 74.869333-169.877333C482.101333 166.336 499.552 149.333333 544.266667 149.333333z"
                p-id="7325" fill="#ffffff"
              ></path>
            </svg>
            <!-- 取消点赞 -->
            <svg
              :class="!isLikes ? 'icon-2 active' : 'icon-2'"
              viewBox="0 0 1024 1024"
              xmlns="http://www.w3.org/2000/svg"
              width="28"
              height="28"
              @click="likeCollection(false, articleData.id)"
            >
              <path
                d="M621.674667 408.021333c16.618667-74.24 28.224-127.936 34.837333-161.194666C673.152 163.093333 629.941333 85.333333 544.298667 85.333333c-77.226667 0-116.010667 38.378667-138.88 115.093334l-0.586667 2.24c-13.728 62.058667-34.72 110.165333-62.506667 144.586666a158.261333 158.261333 0 0 1-119.733333 58.965334l-21.909333 0.469333C148.437333 407.808 106.666667 450.816 106.666667 503.498667V821.333333c0 64.8 52.106667 117.333333 116.394666 117.333334h412.522667c84.736 0 160.373333-53.568 189.12-133.92l85.696-239.584c21.802667-60.96-9.536-128.202667-70.005333-150.186667a115.552 115.552 0 0 0-39.488-6.954667H621.674667z"
                p-id="8951" fill="#ffffff"
              ></path>
            </svg>
          </div>
          <span class="text">{{ likesNum }}</span>
        </div>

        <div class="agree" style="text-align: center; margin-left:30px; ">
          <div class="icon">
            <!-- 取消收藏 -->
            <svg
              @click="cancelCollection(articleData.id)"
              :class="!isCollect ? 'icon-1 active' : 'icon-1'"
              viewBox="0 0 1024 1024"
              xmlns="http://www.w3.org/2000/svg"
              width="28"
              height="28"
            >
              <path
                d="M946.44567 407.179676c-3.706415-11.056823-13.268188-19.154245-24.823362-20.929682l-263.117606-40.614L540.930913 93.91802c-5.108345-10.93198-16.071024-17.939581-28.155247-17.971303-0.030699 0-0.062422 0-0.062422 0-12.021801 0-22.985504 6.945179-28.155247 17.84646L365.79001 345.247138l-263.917832 39.507806c-11.399631 1.961678-20.774139 10.060123-24.355711 21.054525-3.613294 10.963703-0.778736 23.047926 7.257288 31.332612l191.202717 196.684568-45.6282 277.132808c-1.930979 11.741415 3.0208 23.608697 12.769838 30.491455 9.717316 6.882757 22.549575 7.630794 32.983205 1.868557l235.366565-129.47177 234.868215 130.282229c4.703115 2.616594 9.904581 3.924379 15.106046 3.924379 6.291287 0 12.551874-1.868557 17.877159-5.699816 9.748015-6.852058 14.763239-18.687618 12.862959-30.460756L747.488339 634.635061l191.669344-195.84341C947.286828 430.476265 950.121386 418.2365 946.44567 407.179676z"
                p-id="7945" fill="#ffffff"
              ></path>
            </svg>
            <!-- 收藏 -->
            <svg
              :class="isCollect ? 'icon-2 active' : 'icon-2'"
              viewBox="0 0 1024 1024"
              xmlns="http://www.w3.org/2000/svg"
              width="28"
              height="28"
              @click="showCollection(articleData.id)"
            >
              <path
                d="M946.44567 407.179676c-3.706415-11.056823-13.268188-19.154245-24.823362-20.929682l-263.117606-40.614L540.930913 93.91802c-5.108345-10.93198-16.071024-17.939581-28.155247-17.971303-0.030699 0-0.062422 0-0.062422 0-12.021801 0-22.985504 6.945179-28.155247 17.84646L365.79001 345.247138l-263.917832 39.507806c-11.399631 1.961678-20.774139 10.060123-24.355711 21.054525-3.613294 10.963703-0.778736 23.047926 7.257288 31.332612l191.202717 196.684568-45.6282 277.132808c-1.930979 11.741415 3.0208 23.608697 12.769838 30.491455 9.717316 6.882757 22.549575 7.630794 32.983205 1.868557l235.366565-129.47177 234.868215 130.282229c4.703115 2.616594 9.904581 3.924379 15.106046 3.924379 6.291287 0 12.551874-1.868557 17.877159-5.699816 9.748015-6.852058 14.763239-18.687618 12.862959-30.460756L747.488339 634.635061l191.669344-195.84341C947.286828 430.476265 950.121386 418.2365 946.44567 407.179676zM691.986257 602.337471c-6.882757 7.039323-10.060123 16.974603-8.471952 26.722618l37.000706 229.480508L526.666024 751.025908c-9.343809-5.232165-20.74344-5.232165-30.117948-0.062422L302.262138 857.856006l37.779442-229.387387c1.588171-9.717316-1.52575-19.652596-8.40953-26.754341L170.703847 436.176081l220.156142-31.686676c2.191922-0.378623 4.288676-0.980327 6.274914-1.771343 7.674796-2.63092 14.32117-8.233522 18.061354-16.156982l97.392144-206.183919 96.550986 206.712969c4.422729 9.406231 13.205766 16.008602 23.483854 17.596773l219.638349 33.886785L691.986257 602.337471z"
                p-id="7751" fill="#ffffff"
              ></path>
            </svg>
          </div>
          <span class="text">{{ isCollect ? '未收藏' : '已收藏' }}</span>
        </div>

        <div class="agree" style="text-align: center; margin-left:30px; ">
          <div class="icon">
            <!-- 取消关注 -->
            <svg
              @click="clickFollow(false)"
              :class="!isFollow ? 'icon-1 active' : 'icon-1'"
              viewBox="0 0 1024 1024"
              xmlns="http://www.w3.org/2000/svg"
              width="28"
              height="28"
            >
              <path
                d="M736 128c-65.952 0-128.576 25.024-176.384 70.464-4.576 4.32-28.672 28.736-47.328 47.68L464.96 199.04C417.12 153.216 354.272 128 288 128 146.848 128 32 242.848 32 384c0 82.432 41.184 144.288 76.48 182.496l316.896 320.128C450.464 911.68 478.304 928 512 928s61.568-16.32 86.752-41.504l316.736-320 2.208-2.464C955.904 516.384 992 471.392 992 384c0-141.152-114.848-256-256-256z"
                fill="#fff"
              ></path>
            </svg>
            <!-- 关注 -->
            <svg
              :class="isFollow ? 'icon-2 active' : 'icon-2'"
              viewBox="0 0 1024 1024"
              xmlns="http://www.w3.org/2000/svg"
              width="28"
              height="28"
              @click="clickFollow(true)"
            >
              <path
                d="M512 928c-28.928 0-57.92-12.672-86.624-41.376L106.272 564C68.064 516.352 32 471.328 32 384c0-141.152 114.848-256 256-256 53.088 0 104 16.096 147.296 46.592 14.432 10.176 17.92 30.144 7.712 44.608-10.176 14.432-30.08 17.92-44.608 7.712C366.016 204.064 327.808 192 288 192c-105.888 0-192 86.112-192 192 0 61.408 20.288 90.112 59.168 138.688l315.584 318.816C486.72 857.472 499.616 863.808 512 864c12.704.192 24.928-6.176 41.376-22.624l316.672-319.904C896.064 493.28 928 445.696 928 384c0-105.888-86.112-192-192-192-48.064 0-94.08 17.856-129.536 50.272l-134.08 134.112c-12.512 12.512-32.736 12.512-45.248 0s-12.512-32.736 0-45.248L562.24 196c48.32-44.192 109.664-68 173.76-68 141.152 0 256 114.848 256 256 0 82.368-41.152 144.288-75.68 181.696l-317.568 320.8C569.952 915.328 540.96 928 512 928z"
                fill="#fff"
              ></path>
            </svg>
          </div>
          <span class="text">{{ isFollow ? '未关注' : '已关注' }}</span>
        </div>


      </div>
      <div class="joe_detail__operate">
        <div class="joe_detail__operate-tags">
          <template
            v-for="(value,index) in (articleData.articleLable_dictText || ' ').split(',')"
          >
            <a :href="'/articleLableList/'+(articleData.articleLable || ' ').split(',')[index]">{{ value }}</a>
          </template>
        </div>
        <div :class="shareFlag ? 'joe_detail__operate-share' : 'joe_detail__operate-share active'">
          <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="26" height="26"
               @click="shareFlag = !shareFlag"
          >
            <path d="M13.4 512.8c0 276 224 500 500 500s500-224 500-500-224-500-500-500c-276.6 0-500 224-500 500z"
                  fill="#8F7DF6"
            ></path>
            <path
              d="M513.4 233.8c13 0 23.8 10.6 23.8 23.8 0 13-10.6 23.8-23.8 23.8-128 0-231.6 103.8-231.6 231.6s103.8 231.6 231.6 231.6S745 640.8 745 513c-.4-13 9.8-24 22.8-24.6 13-.4 24 9.8 24.6 22.8v1.6c0 154-125 279-279 279s-279-125-279-279 125-279 279-279zM657 352.4c-8.6-9.6-7.8-24.4 1.8-33 9-8 22.6-8 31.4.2l40.8 40.8c12.4 12.2 12.4 32.2 0 44.6l-40.8 41c-9.4 8.8-24 8.6-33-.8-8.6-9-8.6-23.2 0-32.2l7-7h-30c-81.8 0-109.6 34.8-109.6 140.2 0 12.8-10.4 23.2-23.2 23.2-12.8 0-23.2-10.4-23.2-23.2 0-130.2 47.6-186.8 156.2-186.8h30l-7.4-7z"
              fill="#FFF"
            ></path>
          </svg>
          <div class="reach">
            <a
              :href="'https://connect.qq.com/widget/shareqq/index.html?url=https://wxmin.cn/articleDetails/'+articleData.id+'&amp;title='+articleData.title+'&amp;pics='+getImgView(articleData.userAvatar)+'!thum'"
              target="_blank" rel="noopener noreferrer" title="分享到QQ"
            >
              <svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="30" height="30">
                <path
                  d="M512 73.28A438.72 438.72 0 1 0 950.72 512 438.72 438.72 0 0 0 512 73.28zM759.84 646.4c-9.6 8.16-20.8-6.08-29.76-20.32s-14.88-26.72-16-21.76a158.4 158.4 0 0 1-37.44 70.72c-1.28 1.6 28.8 12.48 37.44 35.68s24 57.6-80 68.8a145.76 145.76 0 0 1-80-16c-16.96-8.32-27.52-16-29.6-16a73.6 73.6 0 0 1-13.28 0 108 108 0 0 1-14.4 0c-1.76 0-22.24 32-113.12 32-70.4 0-88.64-44.32-74.4-68.8s37.76-32 34.4-35.36a192 192 0 0 1-34.4-57.6 98.56 98.56 0 0 1-4.16-13.44c-1.28-4.64-6.56 8.64-13.92 21.76s-14.4 22.72-22.88 22.72a11.52 11.52 0 0 1-6.56-2.4c-20.96-16-19.2-55.2-5.44-93.12s48-75.04 48-83.2c1.28-30.24-3.04-35.2 0-43.2 6.56-17.76 14.72-10.88 14.72-20.16 0-116.32 86.4-210.56 192.96-210.56s192.96 94.24 192.96 210.56c0 4.48 11.68 0 17.12 20.16a196.96 196.96 0 0 1 0 43.2c0 11.04 29.44 24.48 44.8 83.2S768 640 759.84 646.4z"
                  fill="#68A5E1"
                ></path>
              </svg>
            </a>
            <a
              :href="'https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=https://wxmin.cn/articleDetails/'+articleData.id+'&amp;sharesource=qzone&amp;title='+articleData.title+'&amp;pics='+getImgView(articleData.userAvatar)+'!thum'"
              target="_blank" rel="noopener noreferrer" title="分享到QQ空间"
            >
              <svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="30" height="30">
                <path
                  d="M512 73.28A438.72 438.72 0 1 0 950.72 512 438.72 438.72 0 0 0 512 73.28zM829.92 432c5.6 16-150.24 146.4-150.24 146.4s2.08 12.64 4.16 22.08c0 0-72.64 2.24-132.32 0-32-1.28-69.12-7.04-69.12-7.04L656 470.24a1005.44 1005.44 0 0 0-125.76-13.6A908 908 0 0 0 380 463.36c-6.4 1.76 44.8 1.6 103.04 6.88 40.8 3.68 94.56 13.44 94.56 13.44l-172.8 128s73.92 4.48 140.32 4.16c74.72 0 142.24-9.92 142.72-8 12.96 56.16 36.96 167.52 28 176-12.16 12.32-185.6-97.6-185.6-97.6S368 785.6 345.92 785.6a3.68 3.68 0 0 1-2.08 0c-10.72-8.8 35.52-206.72 35.52-206.72S222.72 448 229.12 432s208-30.24 208-30.24 74.88-188 92.48-188 92.8 188 92.8 188S824.32 416 829.92 432z"
                  fill="#F5BE3F"
                ></path>
              </svg>
            </a>
            <a
              :href="'http://service.weibo.com/share/share.php?sharesource=weibo&amp;title=分享：'+articleData.title+'，原文链接：https://wxmin.cn/articleDetails/'+articleData.id+'&amp;pic='+getImgView(articleData.userAvatar)+'!thum'"
              target="_blank" rel="noopener noreferrer" title="分享到新浪微博"
            >
              <svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="30" height="30">
                <path
                  d="M480.8 457.76a271.04 271.04 0 0 0-37.28 2.72c-96 13.44-166.72 75.04-157.92 137.44s93.6 101.92 189.6 88.48 166.72-75.04 157.92-137.44c-7.68-54.08-73.12-91.04-152.32-91.2zm-23.36 211.52a122.08 122.08 0 0 1-24 2.4c-48 0-88-27.52-96-68.32-9.28-48 29.44-95.2 86.56-106.24s110.88 18.4 120 66.08-29.44 95.04-86.56 106.08z"
                  fill="#F56467"
                ></path>
                <path
                  d="M512 73.28A438.72 438.72 0 1 0 950.72 512 438.72 438.72 0 0 0 512 73.28zm-43.84 666.88c-150.24 0-272-78.56-272-176S378.56 314.72 448 314.72c29.28 0 86.56 21.76 46.4 90.88a246.24 246.24 0 0 0 34.08-10.08c32-9.12 76.96-18.24 107.68 0 51.04 29.6 0 77.12 0 82.4s102.4 5.28 102.4 87.2c.32 96.48-120.16 175.04-270.4 175.04zm213.76-358.88a56 56 0 0 0-47.2-16 16.96 16.96 0 0 1-17.28-14.4 12.16 12.16 0 0 0 0 2.4v-4.8a12.16 12.16 0 0 0 0 2.4 20.48 20.48 0 0 1 17.28-17.28 77.28 77.28 0 0 1 68.32 18.56c32 28.48 18.72 75.68 18.72 75.68a21.28 21.28 0 0 1-20.48 17.28h-1.76a12.48 12.48 0 0 1-12.8-16.8 49.44 49.44 0 0 0-4.8-47.04zm120.16 60.64A29.6 29.6 0 0 1 776 467.84a22.08 22.08 0 0 1-19.68-25.92A139.2 139.2 0 0 0 736 336c-34.88-50.08-109.92-41.28-109.92-41.28A26.24 26.24 0 0 1 599.84 272v2.88-5.6V272a26.56 26.56 0 0 1 26.24-23.52 188.32 188.32 0 0 1 136.16 47.04c58.08 55.04 39.84 146.4 39.84 146.4z"
                  fill="#F56467"
                ></path>
                <path
                  d="M459.36 547.04a17.6 17.6 0 1 0 17.6 17.6 17.6 17.6 0 0 0-17.6-17.6zm-44.32 23.2a43.52 43.52 0 0 0-18.4 4.32A32 32 0 0 0 376 613.12a32 32 0 0 0 42.88 9.12 32 32 0 0 0 20.64-38.72 25.76 25.76 0 0 0-24.48-13.28z"
                  fill="#F56467"
                ></path>
              </svg>
            </a>
          </div>
        </div>
      </div>
      <div class="joe_detail__copyright">
        <div class="content">
          <div class="item">
            <svg-icon icon-class="edit1" class="icon"/>
            <span>最后编辑：</span>
            <span class="text">{{
                articleData.updateTime == null || articleData.updateTime == '' ? articleData.publishTime : articleData.updateTime
              }}</span>
          </div>
          <div class="item">
            <svg class="icon" width="20" height="20" viewBox="0 0 1024 1024">
              <path
                d="M614.72 554.538c-49.086-6.399-100.27-2.1-149.256-2.1-119.465 0-209.04 95.972-206.84 215.437 0 17.095 8.498 31.99 23.493 40.488 14.896 10.697 34.09 14.896 53.285 17.095 61.882 6.398 123.664 6.398 198.342 6.398 40.488 0 93.872-2.1 142.858-4.298 27.692 0 53.284-4.3 78.877-14.896 19.194-8.498 29.89-19.194 31.99-40.488 8.498-104.57-72.478-204.84-172.75-217.636zM680.8 375.39c0-87.474-74.678-162.053-164.251-162.053-89.574 0-162.053 74.679-162.053 162.053-2.1 87.474 74.678 164.252 162.053 164.252 89.673 0 164.252-74.678 164.252-164.252z"
                fill="#FFF"
              ></path>
              <path
                d="M512.35 0C228.733 0 .5 228.233.5 511.85s228.233 511.85 511.85 511.85 511.85-228.233 511.85-511.85S795.967 0 512.35 0zm275.12 772.074c-2.1 21.294-12.797 31.99-31.991 40.488-25.593 10.697-51.185 14.896-78.877 14.896-49.086 2.099-102.37 4.298-142.858 4.298-74.678 0-136.46 0-198.342-6.398-19.195-2.1-38.389-6.398-53.285-17.095-14.895-8.497-23.493-23.493-23.493-40.488-2.1-119.465 87.475-215.437 206.84-215.437 49.085 0 100.27-4.299 149.256 2.1 100.27 12.896 181.247 113.166 172.75 217.636zM354.495 375.39c0-87.474 72.479-162.053 162.053-162.053S680.8 288.016 680.8 375.39c0 89.574-74.679 164.252-164.252 164.252-87.375 0-164.152-76.778-162.053-164.252z"
                fill="#249FF8"
              ></path>
            </svg>
            <span>版权属于：</span>
            <span class="text">{{ articleData.createBy_dictText }}</span>
          </div>
          <div class="item">
            <svg class="icon" width="20" height="20" viewBox="0 0 1024 1024">
              <path d="M511.854 0A511.854 511.854 0 1 0 1024 511.854 511.854 511.854 0 0 0 511.854 0z"
                    fill="#39B54A"
              ></path>
              <path
                d="M576.491 630.355L460.028 746.818a129.565 129.565 0 0 1-182.555 0l-2.038-2.038a128.983 128.983 0 0 1 0-182.264l81.233-81.233a179.644 179.644 0 0 0 13.102 70.46l-52.7 52.408a69.878 69.878 0 0 0 0 98.703l2.038 2.038a70.169 70.169 0 0 0 98.703 0l116.463-116.463a69.878 69.878 0 0 0 0-98.703l-2.039-2.038a69.587 69.587 0 0 0-13.975-10.772l42.509-42.51a128.11 128.11 0 0 1 13.102 11.356l2.038 2.038a129.274 129.274 0 0 1 0 182.264z"
                fill="#FFF"
              ></path>
              <path
                d="M746.236 460.902l-81.233 81.233a179.353 179.353 0 0 0-13.102-70.46l52.7-52.409a69.878 69.878 0 0 0 0-98.702l-2.039-2.038a69.878 69.878 0 0 0-98.702 0L487.397 434.989a69.878 69.878 0 0 0 0 98.702l2.038 2.038a68.422 68.422 0 0 0 13.976 10.773l-42.51 42.51a136.553 136.553 0 0 1-13.101-11.356l-2.038-2.038a128.983 128.983 0 0 1 0-182.265l116.463-116.462a129.565 129.565 0 0 1 182.555 0l2.038 2.038a128.983 128.983 0 0 1 0 182.264z"
                fill="#FFF"
              ></path>
            </svg>
            <span>本文链接：</span>
            <span class="text">
                <a-button type="link" @click="copyUrl(articleData.id)">{{ baseApi + articleData.id }}</a-button>
            </span>
          </div>
          <div class="item">
            <svg class="icon" width="20" height="20" viewBox="0 0 1024 1024">
              <path d="M0 512a512 512 0 1 0 1024 0A512 512 0 1 0 0 512z" fill="#F3B243"></path>
              <path
                d="M540.672 323.584a90.112 90.112 0 1 0 180.224 0 90.112 90.112 0 1 0-180.224 0zM540.672 688.128a90.112 90.112 0 1 0 180.224 0 90.112 90.112 0 1 0-180.224 0zM229.376 512a90.112 90.112 0 1 0 180.224 0 90.112 90.112 0 1 0-180.224 0z"
                fill="#FFF"
              ></path>
              <path d="M341.037 480.37l257.344-175.718 27.713 40.592-257.34 175.718z" fill="#FFF"></path>
              <path d="M349.053 488.452L601.907 670.56l-28.725 39.887L320.307 528.34z" fill="#FFF"></path>
            </svg>
            <span>作品采用：</span>
            <span class="text">
                《
                <a class="link" href="//creativecommons.org/licenses/by-nc-sa/4.0/deed.zh" target="_blank"
                   rel="noopener noreferrer nofollow"
                >署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)</a>
                》许可协议授权
            </span>
          </div>
        </div>
      </div>
      <div class="ad-main">
        <div class="ad-main-img">
          <img class="ad-main-img" src="https://www.wxmin.cn:9000/ants-file/extension/1340X640_1663580119897.jpg"
               alt="">
        </div>
        <div class="ad-main-body">
          <a class="ad-main-body-title">【天翼云电脑】4核8G免费试用3个月！试用阶段购买享受3.5折+赠送时长</a>
          <p class="ad-main-body-ad">广告</p>
        </div>
      </div>
<!--      <div class="joe_detail__related">-->
<!--        <div class="joe_detail__related-title">相关推荐</div>-->
<!--        <div class="joe_detail__related-content">-->
<!--          <a class="item" href="https://www.wxmin.cn" :title="articleData.title">-->
<!--            <img class=" ls-is-cached lazyloaded"-->
<!--                 :src="articleData.cover"-->
<!--                 :data-src="articleData.cove"-->
<!--                 :alt="articleData.title"-->
<!--            >-->
<!--            <h6>{{ articleData.title }}</h6>-->
<!--          </a>-->
<!--        </div>-->
<!--      </div>-->
    </div>
    <!--    <ul class="joe_post__pagination" style="margin-bottom: 0">-->
    <!--      <li class="joe_post__pagination-item prev"><a href="https://www.itbunan.xyz/py/152.html" title="独立站对接支付渠道">上一篇</a>-->
    <!--      </li>-->
    <!--      <li class="joe_post__pagination-item next"><a href="https://www.itbunan.xyz/liu/136.html" title="项目管理工具git的安装与使用">下一篇</a>-->
    <!--      </li>-->
    <!--    </ul>-->
    <!--    <div class="joe_comment" style="margin-bottom: 20px">-->
    <!--      <h3 class="joe_comment__title">评论 (4)</h3>-->
    <!--      <div id="joe_comment_login" class="joe_comment__close" v-if="checkLogin()">-->
    <!--        <span>只有<a href="javascript:;">登录</a>用户才可评论，请点击右上角<a href="javascript:;">登录</a>按钮进行登陆！</span>-->
    <!--      </div>-->
    <!--      <div v-else>-->
    <!--        <ants-leave-message @doSend="doSend" :commentList="data" @doChidSend="doChidSend"/>-->
    <!--      </div>-->
    <!--    </div>-->

    <collection-modal ref="collectionModal" @okCollection="okCollection"/>

  </div>
</template>

<script>
import {deleteAction, getAction, getFileAccessHttpUrl, postAction} from '@/api/manage'
import AntsMarkDown from '@/components/ants/AntsMarkDown'
import moment from 'moment'
import {getToken} from '@/utils/auth'
import CollectionModal from '../subTables/CollectionModal'
import AntsLeaveMessage from '@/components/ants/AntsLeaveMessage'
import pick from "lodash.pick";

export default {
  name: 'ArticleBody',
  components: {
    AntsMarkDown,
    CollectionModal,
    AntsLeaveMessage
  },
  data() {
    return {
      url: {
        getArticleById: '/articleView/getArticleById',
        likeCollection: '/articleView/likeCollection',
        cancelLikeCollection: '/articleView/cancelLikeCollection',
        checkBaiduIncludeUrl: '/articleView/checkBaiduIncludeUrl',
        cancelCollection: '/articleFavoritesSub/delete',
        addFollow: '/articleFollow/add',
        deleteFollow: '/articleFollow/delete',
        recordViewsNum: '/articleView/recordViewsNum'
      },
      articleData: {},
      isCollect: true,
      isLikes: true,
      isFollow: true,
      collectNum: 0,
      likesNum: 0,
      second: 0,
      minute: 0,
      hour: 0,
      onlineTime: '',
      isIncluded: false,
      loading: false,
      isNotArticle: true,

      shareFlag: true,
      data: [],
      baseApi: process.env.VUE_APP_BASE_API.replace('ants/', ''),
      setTimeoutId: ''
    }
  },
  mounted() {
    this.interval()
    this.initArticle()
    this.recordViewsNum()
  },
  beforeDestroy() {
    clearTimeout(this.setTimeoutId)
  },

  methods: {
    //格式化时间
    formatTime(value) {
      return moment(value).format('MM/DD')
    },
    interval() {
      this.second++
      if (this.second == 60) {
        this.second = 0
        this.minute += 1
      }
      if (this.minute == 60) {
        this.minute = 0
        this.hour += 1
      }

      if (this.minute > 10) {
        this.onlineTime = '您已阅读：10分+'
        clearTimeout(this.setTimeoutId);
      } else {
        this.onlineTime = '您已阅读：' + this.hour + '时' + this.minute + '分' + this.second + '秒。'
        this.setTimeoutId = setTimeout(() => {
          this.interval()
        }, 1000)
      }

    },
    initArticle() {
      var id = this.$route.params.id
      this.loading = true
      getAction(this.url.getArticleById, {
        id: id
      }).then(res => {
        if (res.success) {
          this.loading = false
          this.articleData = res.result.records[0]
          // 设置页面标题
          // document.title = this.articleData.title
          this.isCollect = this.articleData.isCollect === '1' ? false : true
          this.isLikes = this.articleData.isLikes === '1' ? false : true
          this.isFollow = this.articleData.isFollow
          this.collectNum = this.articleData.collectNum
          this.likesNum = this.articleData.likesNum
        } else {
          this.loading = false
        }
      }).catch(error => {
        this.$router.push('/article_404')
      }).finally(() => {
        this.loading = false
      })
    },
    /* 图片预览 */
    getImgView(text) {
      if (text && text.indexOf(',') > 0) {
        text = text.substring(0, text.indexOf(','))
      }
      return getFileAccessHttpUrl(text)
    },
    // 点赞
    likeCollection(flag, articleId) {
      var token = getToken()
      if (token) {
        const params = {
          'articleId': articleId
        }
        if (flag) {
          postAction(this.url.likeCollection, params).then(res => {
            if (res.success) {
              this.isLikes = false
              this.likesNum += 1
            }
          })
        } else {
          deleteAction(this.url.cancelLikeCollection, params).then(res => {
            if (res.success) {
              this.isLikes = true
              this.likesNum -= 1
            }
          })
        }
      } else {
        this.loginPrompt()
        return false
      }
    },
    clickFollow(flag) {
      var token = getToken()
      if (token) {
        const params = {
          'username': this.articleData.createBy
        }
        if (flag) {
          postAction(this.url.addFollow, params).then(res => {
            if (res.success) {
              this.isFollow = false
            }
          })
        } else {
          deleteAction(this.url.deleteFollow, params).then(res => {
            if (res.success) {
              this.isFollow = true
            }
          })
        }
      } else {
        this.loginPrompt()
        return false
      }
    },
    // 显示收藏
    showCollection(articleId) {
      var token = getToken()
      if (token) {
        this.$refs.collectionModal.title = '收藏夹'
        this.$refs.collectionModal.click(articleId)
      } else {
        this.loginPrompt()
        return false
      }
    },
    // 取消收藏
    cancelCollection(articleId) {
      deleteAction(this.url.cancelCollection, {articleId: articleId}).then(res => {
        if (res.success) {
          this.$message.success(res.message)
          this.isCollect = true
          this.collectNum -= 1
        } else {
          this.$message.error(res.message)
        }
      })
    },
    okCollection(res) {
      this.$refs.collectionModal.visible = false
      this.isCollect = false
      this.collectNum += 1
    },
    loginPrompt() {
      this.$info({
        title: '登录提示',
        content: '此项操作需要登陆，请点击右上角登录按钮进行登陆！'
      })
    },
    recordViewsNum() {
      var id = this.$route.params.id
      getAction(this.url.recordViewsNum, {id: id})
    },
    copyUrl(id) {
      navigator.clipboard.writeText(this.baseApi + 'articleDetails/' + id)
        .then(() => {
          this.$message.success('复制成功')
        })
        .catch(() => {
          this.$message.error('复制失败')
        })
    },
    checkLogin() {
      let token = getToken()
      if (token) {
        return false;
      }
      return true
    },
    // 留言  点击确定按钮
    doSend(content) {
      // if (!new RegExp(/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/).test(this.leavingMessage.mail)) {
      if (content === undefined || content === null || content.length === 0 || content.trim().length === 0) {
        this.$message.error('你也得留下一点内容才行撒！')
      } else {
        this.personInfoVisible = true
        this.$nextTick(() => {
          const qqinfo = JSON.parse(window.localStorage.getItem(localStorageKey))

          qqinfo.nickname = qqinfo.name

          qqinfo.avatar = qqinfo.qlogo
          this.form.setFieldsValue(pick(qqinfo, 'nickname', 'email', 'url', 'avatar'))
        })
        this.isChidSend = false
        this.leavingMessage.content = content
      }
    },
    // 留言回复  点击确定按钮
    doChidSend(text, targetUserId, parentId) {
      if (text === undefined || text === null || text.length === 0 || text.trim().length === 0) {
        this.$message.error('你也得留下一点内容才行撒！')
      } else {
        this.personInfoVisible = true
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(JSON.parse(window.localStorage.getItem(localStorageKey)), 'nickname', 'email', 'url', 'avatar'))
        })
        this.leavingMessage.content = text
        this.leavingMessage.targetUserId = targetUserId
        this.leavingMessage.pid = parentId
        this.isChidSend = true
      }
    },
  }
}
</script>

<style scoped>
.content-html {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}


div.hide-article-box {
  width: 100%;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), color-stop(70%, #fff));
  background-image: linear-gradient(
    -180deg, rgba(255, 255, 255, 0) 0%, #fff 70%);
  padding-bottom: 34px;
}

.text-center {
  text-align: center;
}

.hide-article-pos {
  position: relative;
  z-index: 998;
  padding-top: 160px;
  bottom: -1px;
  margin-top: -200px;
}

div.hide-article-box .follow-text {
  color: #ca0c16;
}

.ant-btn {
  padding: 0;
}

.ad-main {
  width: 100%;
  display: flex;
  padding: 10px;
  margin-top: 20px;
  background: #f2f6fc;
  border-radius: 4px
}

.ad-main-img {
  max-width: 100%;
  height: auto;
  flex: 1;
}

.ad-main-body {
  flex: 4;
  margin-left: 10px;
}

.ad-main-body-title {
  font-size: 14px;
  line-height: 1.4;
  color: #0e1011;
}

.ad-main-body-ad {
  font-size: 11px;
  margin: 10px 0 0 5px;
  color: #a6b7bf;
}
</style>
